<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dktable plugin advanced usage example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.dktable.js"></script>
<!-- here is one of the default themes -->
<link href="../themes/default/style.css" type="text/css" rel="stylesheet"/>
<style></style>
</head>
<body>

<!-- container for dktable -->
<table id="example_table" width="500px" class="dktable_default"></table>

<br/>
<a href="#" onclick="return false;" id="refreshsmth">refresh me</a>

<br/>
<a href="#" onclick="return false;" id="changesmth">change request params</a>

<br/>
<a href="#" onclick="return false;" id="refreshrow">refresh row with ID = 14</a>
<em>its on the first page by default... </em>

<script type="text/javascript">

$(document).ready(function() {
	var options = {
		// columns titles
		headers: 		['№','Brand','Price','Status'],	
		// JSON source URL - this part of the request is unchangeable
		url: 			'advanced.php',		
		// some special data to send - this can be changed latter with using of refresh method
		data:			{'price_prefix': 'dollars'},
		// number of rows to get during the init request
		defaultNumRows:	7,			
		//user can choose one of this values as number of rows to get		
		numRows:		[7,14,21],	
		// which columns should be sortable 			
		sortable: 		[1],
		// columns configuration						
		columns: [
			// this is a default type of column
			{'type' : 'text'},
			// you can specify width attribute
			{'type' : 'text', 'width': '200px'},
		    {'type' : 'text'},
			// try to construct checkbox with class and title attributes
		    {'type' : 'checkbox',  'styleClass' : 'changestatus', 'title': 'check me'}
		],
		// after all rows are showed you can make smth by specifying this callback
		onDrawComplete: function(area) {
			// you should always use area to search items to bind events...
			// especially if you use redrawRow method... otherwise you will get
			// events attached twice or more times :)
			$(".changestatus", area).click(function () {
				// all tr tabs have row_id attribute, you can get it
				var row_id = $(this).parent("td").parent("tr").attr('row_id');
				alert(row_id);
			});
		}
	};

	// initializing dktable
	$("#example_table").dktable(options);

	// just an example of how to programmly refresh table
	$("#refreshsmth").click(function() {
		$("#example_table").refresh();
	});

	// example of how to change additional params or how to send new params with the same URL
	$("#changesmth").click(function() {
		$("#example_table").refresh({'price_prefix' : 'euro'});
	});

	// example of how to refresh direct row by id
	$("#refreshrow").click(function() {
		$("#example_table").redrawRow('14');
	});

});

</script>
</body>
</html>